<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from "vue";
import router from "@/router";

export default defineComponent({
  url: import.meta.url,
  props: {
    name: {
      type: String,
      default: "线上展厅",
    },
    text: {
      type: String,
      default: "为您打造一场电子信息全产业链的产品展示窗口，并感受科技创新的魅力",
    },
  },
  setup(props: any) {
    let data = reactive({});
    return {
      data,
    };
  },
});
</script>

<template>
  <div class="topBox">
    <div class="content flex align_center flex_column justify_center">
      <div class="title">{{ name }}</div>
      <div class="text ">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topBox {
  height: 200px;
  color: #fff !important;
  background-image: url("https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/pageTopImg.png");
  .title {
    font-size: 40px;
    margin-bottom: 23px;
  }
  .text {
    font-size: 22px;
  }
}
.content {
  height: 100%;
  margin: 0px auto;
}

@media screen and (max-width: 450px) {
  .topBox {
    .title {
      font-size: 30px;
    }
    .text {
      font-size: 16px;
    }
  }
}
</style>
